/**
 * @description  交易监控
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { XYAxisChartsC, SecondHeaderC, QuickQueryC } from '../../../comps';
import style from './index.less';

class showEchartsThree extends PureComponent {
  constructor() {
    super();
    this.state = {
      radioVal: '交易笔数',
    };
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/getEchartsThree1',
      payload: args,
    });
    dispatch({
      type: 'TransactionMonitoringM/getEchartsThree2',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'TransactionMonitoringM/save',
        payload: { getEchartsThree1: { xaxis: [], series: undefined }, getEchartsThree2: { xaxis: [], series: undefined } },
      });
      dispatch({
        type: 'TransactionMonitoringM/getEchartsThree1',
        payload: args,
      });
      dispatch({
        type: 'TransactionMonitoringM/getEchartsThree2',
        payload: args,
      });
    }
  }

  // 获取max 和min
  getMaxAndMinNum = (arr1, arr2, arr3) => {
    const OneArry = _.concat(arr1, arr2);
    const AccountArry = _.concat(OneArry, arr3);
    const max = (_.max(AccountArry) * 1.2).toFixed(2);
    const min = (_.min(AccountArry) * 0.8).toFixed(2);
    const newArr = [[min, max]] || [];
    return newArr;
  };

  showEcharts = () => {
    const { radioVal } = this.state;
    const {
      TransactionMonitoringM: { getEchartsThree1, getEchartsThree2 },
    } = this.props;
    const xAxis = getEchartsThree1.xaxis;
    const series = getEchartsThree1.series;
    const xAxis1 = getEchartsThree2.xaxis;
    const series1 = getEchartsThree2.series;
    const data = series && series.length ? this.getMaxAndMinNum(series[0].data, series[1].data, series[2].data) : [];
    const data2 = series1 && series1.length ? this.getMaxAndMinNum(series1[0].data, series1[1].data, series1[2].data) : [];
    if (radioVal == '交易笔数') {
      return (
        <>
          <XYAxisChartsC series={series} xAxis={xAxis} yAxisUnit={['单位(笔)']} height={323} dataZoom={true} yAxisRange={data} />
        </>
      );
    } else if (radioVal == '交易金额') {
      return (
        <>
          <XYAxisChartsC
            series={series1}
            xAxis={xAxis1}
            height={323}
            gridLeft={100}
            toolTipDataFormat={[(value) => value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')]}
            yAxisUnit={['单位(亿元)']}
            dataZoom={true}
            yAxisRange={data2}
          />
        </>
      );
    }
  };

  // 按钮点击事件
  onChangeRadio = (e) => {
    this.setState({
      radioVal: e,
    });
  };

  render() {
    const { radioVal } = this.state;
    return (
      <div className={style.body_area}>
        <Row>
          <Col span={12}>
            <SecondHeaderC title='交易笔数和金额' />
          </Col>
          <Col span={12} style={{ textAlign: 'right', marginBottom: '10px' }}>
            <QuickQueryC
              dataSource={[
                { value: '交易笔数', title: '交易笔数' },
                { value: '交易金额', title: '交易金额' },
              ]}
              initialValue={radioVal}
              onChange={(e) => this.onChangeRadio(e)}
            />
          </Col>
        </Row>
        <div className='showEcharts3'>{this.showEcharts()}</div>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM }) => ({
  TransactionMonitoringM,
}))(showEchartsThree);
